import React from 'react';
import PropTypes from 'prop-types';
import { Navbar, Nav, NavItem, NavDropdown } from 'react-bootstrap';
import './header.less';

export default class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // currNavKey: '',
      currNavLev: 1,
    };
  }

  setNav(navs, navLev = '1') {
    const url = window.top.document.location.pathname;
    return navs.map((e, i) => {
      if (e.children && e.children.length) {
        this.setState({
          currNavLev: this.state.currNavLev + 1,
        });
        return (
          <NavDropdown eventKey={`${navLev}.${i}`} title={e.name} key={e.name}>
            {this.setNav(e.children, `${navLev}.${i}`)}
          </NavDropdown>
        );
      }
      return (
        <NavItem
          eventKey={`${navLev}.${i}`}
          href={e.url}
          key={e.name}
          className={url === e.url ? 'active' : ''}
        >
          {e.name}
        </NavItem>);
    });
  }

  render() {
    const { home, navs } = this.props;
    return (
      <Navbar inverse className="w-header">
        <Navbar.Header>
          <Navbar.Brand>
            <a href="/">{home}</a>
          </Navbar.Brand>
        </Navbar.Header>
        <Nav>
          {this.setNav(navs)}
        </Nav>
      </Navbar>
    );
  }
}

// 指定 props 的默认值：
Header.defaultProps = {
  home: '监控系统',
  navs: [{
    name: '首页',
    url: '/',
  }],
};

Header.propTypes = {
  home: PropTypes.string,
  navs: PropTypes.array,
};
